<template>
  <view class="content">
    <view class="title">子组件B</view>
    
    <!-- 兄弟传值展示（蓝色背景值框） -->
    <view class="b-box">
      <text>CompA组件传进来的值:</text>
      <text class="intent-text-box" style="margin-left: 10rpx;">{{ result || '暂无' }}</text>
    </view>
    
    <!-- 回传值区域（灰色输入框） -->
    <view class="b-box" style="margin-top: 20rpx;">
      <text>回传值:</text>
      <input 
        type="text" 
        v-model="callbackValue" 
        style="color: yellow; background: #ccc; border: none; padding: 15rpx; margin-left: 10rpx; border-radius: 8rpx; flex: 1;" 
        placeholder="请输入回传父组件的值"
      />
      <button @click="sendToParent" size="mini" style="margin-left: 10rpx;">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '', 
      callbackValue: '' 
    }
  },
  created() {
    this.eventHandler = uni.$on('compAtoCompB', (data) => {
      console.error("----子组件B----接收子组件A传值-->", data);
      this.result = data; 
    });
  },
  onUnload() {
    uni.$off('compAtoCompB', this.eventHandler);
  },
  methods: {
    sendToParent() {
      if (!this.callbackValue) {
        uni.showToast({ title: '请输入回传值', icon: 'none' });
        return;
      }
      console.warn("----子组件B----向父组件回传值-->", this.callbackValue);
      this.$emit('callBackFun', this.callbackValue);
      uni.showToast({ title: '回传父组件成功', icon: 'none' });
    }
  }
}
</script>

<style scoped>
/* 绿色背景，匹配效果图 */
.content {
  padding: 25rpx;
  background-color: #81c784;
  border-radius: 12rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}
.b-box {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}
/* 蓝色值框样式，匹配效果图 */
.intent-text-box {
  background: #0000ff;
  color: #fff;
  padding: 5rpx 15rpx;
  border-radius: 4rpx;
}
</style>